<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/bootstrap-5.3.0-alpha1-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="/font/bootstrap-icons.css">
    <link rel="stylesheet" href="/stylesheets/register.css">
    <title>注册</title>
    <style>
        .invalid{
            color: red;
        }
    </style>
</head>

<body>
    <!-- head -->
    <div class="head">
        <h1>校科联</h1>
        <a href="/out" class="bi-person-square"></a>
    </div>


    <!--  page-->
    <div class="page">
        <h3>账号注册</h3>
        <form action="/reg" method="post">
            <div class="field one">
                <span>用户名&nbsp;</span>
                <input type="text" name="username" class="username">
            </div>
            <div class="field two">
                <span>密码&nbsp;</span>
                <input type="password" name="password" class="password">
            </div>
            <button type="submit">注册</button>
            <span class="sign">已有账号？</span><a href="/login">点击登录</a>
        </form>
    </div>



    <!-- fixed -->

    <div class="fixed">

        <a href="" class="bi-house-door-fill"></a>
        <a href="" class="bi-bar-chart-fill"></a>
        <a href="" class="bi-envelope"></a>
    </div>



    <script src="/bootstrap-5.3.0-alpha1-dist/js/bootstrap.min.js"></script>
    <script>
        
            var form = document.querySelector('form');
            const fieldo=document.querySelector('.one')
            const fieldt=document.querySelector('.two')

            // 添加提交事件监听器
            form.addEventListener('submit', function (event) {
                event.preventDefault(); // 阻止默认提交行为

                // 获取用户名输入框
                var usernameInput = document.querySelector('.username');
                var username = usernameInput.value.trim();
                var passwordInput = document.querySelector('.password');
                var password = passwordInput.value.trim();

                // 检查用户名是否为空
                if (!username) {
                    fieldo.classList.add('invalids');
                    alert('用户名不能为空');
                    
                }
                if (!password) {
                    fieldt.classList.add('invalids');
                    alert('密码不能为空');
                }

                // 示例验证规则：只允许字母、数字、下划线和中文，且长度在2-16个字符之间
                var isValidUsername = /^[a-zA-Z0-9_\u4e00-\u9fa5]{6,16}$/.test(username);
                var isValidPassword = /^.{6,16}$/.test(password);

                // 验证邮箱格式
               

                // 如果验证失败，则显示错误提示，并终止提交
                if (!isValidUsername || !isValidPassword) {
                    if (!isValidUsername) {
                        usernameInput.classList.add('invalid');
                        fieldo.classList.add('invalids')
                        alert('用户名应为6-16个字符，且只能包含字母、数字、下划线和中文字符');
                    }
                    if (!isValidPassword) {
                        passwordInput.classList.add('invalid');
                        fieldt.classList.add('invalids')
                        alert('密码应为6-16个字符，且只能包含字母、数字、标点符号');
                    }
                }

                if(username||password){
                    if(username){
                        fieldo.classList.add('invalids')
                    }
                    if(password){
                        fieldt.classList.add('invalids')
                    }
                }
                if (isValidUsername || isValidPassword){
                if(isValidUsername){
                    usernameInput.classList.remove('invalid');
                    fieldo.classList.remove('invalids')
                }
                if(isValidPassword){
                    passwordInput.classList.remove('invalid');
                    fieldt.classList.remove('invalids')
                }
                if(isValidUsername&& isValidPassword){
                    form.submit();
                }
                    return
            }
                
                
            })
    </script>
</body>

</html>